import React from 'react'
import axios from 'axios'
import './app.less'

// 弹窗宽度
const MODAL_WIDTH = 350
/**
 * 边界检测，鼠标点击modal之外，modal隐藏
 * @param {*} x 鼠标的x轴位置
 * @param {*} y 鼠标的y轴位置
 * @param {*} modalPosition 弹窗的left和top
 */
function boundaryDetection(x, y, modalPosition = { left: 0, top: 0 }) {
    let { left, top } = modalPosition
    if (
        x > left &&
        x < left + MODAL_WIDTH &&
        y > top &&
        y < top + MoveSearchApp.offsetHeight
    ) {
        return true
    }
    return false
}


export default class extends React.Component {
    constructor(props) {
        super(props)
        this.state = { show: false }
    }
    componentDidMount() {
        // 监听 mouseup 事件，触发时检查是否有文字被选中，如果有则弹窗展示
        document.addEventListener('mouseup', (e) => {
            var selectionObj = window.getSelection()
            var selectedText = selectionObj.toString()
            console.log('selectedText', selectedText)
            // 选中文字为空，说明当前操作为点击
            if (selectedText.length === 0) {

                if (this.state.show) {
                    // 重新计算是否关闭弹窗
                    // 检测鼠标位置是否在弹窗内，不是则关闭弹窗
                    var inModal = boundaryDetection(
                        e.clientX,
                        e.clientY,
                        this.state.modalPosition
                    )
                    if (!inModal) {
                        this.setState({
                            show: false,
                            data: [],
                        })
                    }
                }

            } else {
                var selectionObjRect = selectionObj
                    .getRangeAt(0)
                    .getBoundingClientRect()

                // 获取选中文字的位置，x y是横纵坐标，height width是选中文字的高度和宽度
                let { x, y, height, width } = selectionObjRect
                // 计算弹窗位置，算出left和top
                var left = x + width / 2 - MODAL_WIDTH / 2;
                left = left > 10 ? left : 10;
                var top = y + height;

                var scrollLeft =
                    document.documentElement.scrollLeft || document.body.scrollLeft
                var scrollTop =
                    document.documentElement.scrollTop || document.body.scrollTop

                // 弹窗展示前发请求到 baidukaifa 的接口，获取搜索内容
                axios
                    .get(
                        // `https://kaifa.baidu.com/rest/v1/search?query=${selectedText}&pageNum=1&pageSize=10`
                        `https:/movesearch.vercel.app/api/baidu?query=${selectedText}&pageNum=1&pageSize=10`
                    )
                    .then((res) => {
                        let { data } = res.data.data.documents
                        console.log(data)
                        if (data.length) {
                            this.setState({
                                data: data,
                                show: true,
                                selectedText: selectedText,
                                modalPosition: {
                                    left: left + scrollLeft,
                                    top: top + scrollTop,
                                },
                            })
                        }
                    })
            }
        })
    }

    handleClose() {
        this.setState({
            show: !this.state.show,
        })
    }
    render() {
        let { show, selectedText, modalPosition, data } = this.state
        return (
            <>
                {show && data && data.length ? (
                    <div
                        className="move-search"
                        id="MoveSearchApp"
                        style={{
                            ...modalPosition,
                        }}
                    >
                        <div className="move-search-content">
                            <ul className="move-search-ul">
                                {data.map((l) => (
                                    <li className="move-search-li" key={l.id}>
                                        <a href={l.url} target="_blank">
                                            {l.title}
                                        </a>
                                        <span>{l.summary}</span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <div className="move-search-bottom-fade"></div>
                        <footer className="move-search-footer">
                            <a
                                href={`https://kaifa.baidu.com/searchPage?wd=${selectedText}`}
                                target="_blank"
                            >
                                Read More
                            </a>
                        </footer>
                    </div>
                ) : null}
            </>
        )
    }
}
